<template>
    <div class="height-box">
        <photo-card :photoList="photoList"></photo-card>
    </div>
</template>
<script setup lang='ts'>
    import photoCard from "./modules/photoCard";
    import dreamImg from '@/assets/dream.jpg'
    import sea from '@/assets/sea.jpg'

    import {reactive, ref, watch} from 'vue'
    const photoList = reactive([
        {   
            id: '1',
            title: '什么是童年',
            imgUrl: dreamImg,
            decript: '没有人规定童年的方式，只要他有自己快乐的方式，那就是童年。'
        },
        {   
            id: '2',
            title: '向往的生活',
            imgUrl: sea,
            // decript: '有的时候我们喜欢一个人，我们就会说，我摘月亮给你，或者我给你在天上划一道彩虹，就好像是一个美好的祝福，告诉你这就是向往的生活。'
            decript: `下了几天的雨，我整天呆在房里上网，几乎都变成宅男了。今天放晴，出去走走，忽然一股馨香飘来。这种香不同于浓郁的牡丹花香，也有别于沁人心脾的玫瑰花香，而是淡淡的，若有若无时隐时显，走远了，也就消散在空气中了。不经意抬头一望，就见小区路边的玉兰树的叶丛中，开了大朵的花，迎风摇曳，神采奕奕，美丽至极，哦，原来是玉兰花香。
            玉兰有很多品种，我这个小区栽的是广玉兰。开花很大，形似荷花，故又称“荷花玉兰”。根据植物学资料，广玉兰花期为5—6月，果期9—10月，常绿乔木，树势雄伟，适应性强。
            广玉兰开花有早有迟，在同一棵树上，能看到各种形态的花，很有点四世同堂的味道。绿油油的叶丛中，有的含苞待放，洁白的花蕾柔嫩甜美纯洁，像新生的婴儿一般惹人喜爱。有的刚刚绽放，从容素雅袅娜，紫色的花蕊逗引来几只小蜜蜂。有的已经盛开，就象雍容清丽的大家闺秀，笑吟吟地俯视着过往行人。有的花瓣已凋谢，花蕊化为花茎，圆柱形的花茎上面缀满了紫红色的细珠，这就是孕育着新生命的种子。
雨中的玉兰，显得清新而雅致。雨洗过的叶子绿得发翠，雨珠在肥叶上跳荡。雨洗过的花朵白得眩目，雨汁轻悄悄地渗进芯蕊。你可以学着古人，端一杯葡萄酒，倚在窗前，一面兴致勃勃地观赏这一切，一面低吟浅唱：“素面粉黛浓，玉盏擎碧空，何须琼浆液，醉倒赏花翁”。月光下的玉兰树，亭亭玉立，幽静而神秘，微风拂过，树影婆娑，树叶低喁，让人心静如水。月光下的玉兰花，透出淡淡的光晕，暗香泘动，令人心醉神迷。你可以揣个5G手机，避开嘈杂的人群，独自坐在玉兰树下的小石凳上，静静地聆听着花开的声音，在玉兰花的幽香里，挥洒小资情调，放纵思绪横飞。
现在赏花、送花都要讲究花语，广玉兰的花语是什么呢？有人说是：生生不息、世代相传。也有人说是：美丽、高洁、芬芳、纯洁。照我说，广玉兰的花语是：忠于信念，尽责尽职。不是吗？广玉兰花不在乎开得灿烂与否，也不在乎开得天长地久，尽管每年最终都会零落成泥碾作尘，但它不忘自己的使命，每年经受过严冬的煎熬，又经受过春雨的洗礼，终于在初夏时分，开开心心地绽放，为装扮大自然作出了贡献。
我想人生也是如此。成功与失败，得到与失去，都是人生常事。厚积而薄发，我们人生的花开得哪怕并不辉煌，哪怕并不出众，哪怕像惊鸿掠影，那也没什么，因为毕竟曾经努力过、奋发过、绽放过。`
        }
    ])
    // let createBoolean:Boolean = new Boolean(1)   new Boolean() 返回的是对象
    // console.log('createBoolean', createBoolean)  
    
    interface PersonClass{
        get(type: boolean):boolean
    }
    interface PersonClass2{
        set():void,
        asd:string
    }
    class A{
        name: string
        constructor(){
            this.name = '123'
        }
    }
    class Person extends A implements PersonClass,PersonClass2{
        asd: string
        constructor(){
            super()
            this.asd = '890'
        }
        get(type:boolean){
            return type
        }
        set(){
            console.log('我是set()')
        }
    }
    let dog = new Person()
    console.log('dog', dog)
    // let vars
    // vars = 192
    // vars = 'thc'

    const Arr:Array<number> = [1,2,3,4,5]
        Arr.splice(2,0,4)
        console.log('arr', Arr)
    
    let name = ref('kino')
    console.log('name', name)
    
    let message = ref('')
    let message2 = ref('')
    watch([message, message2], (newVal, oldVal)=>{
        console.log('new value', newVal)
        console.log('old value', oldVal)
    })

    let userInfo = reactive({
        name: 'kino',
        hobby: ['fish', 'fly']
    })

    watch(()=>userInfo.hobby, (newVal, oldVal)=>{
        console.log('new value', newVal)
        console.log('old value', oldVal)
    })

    type Props = {
        title?:string,
        data?: number[]
    }
    withDefaults(defineProps<Props>(),{
        title: 'kino',
        data: ()=> [1,2,3]
    })


</script>
<style lang='scss' scoped>
    .height-box{
        padding: 10px;
    }
</style>